<template>
  <div :class="className" :style="{ height: height, width: width }"/>
</template>

<script>
import * as echarts from "echarts";
import axios from 'axios'
import {electricityProductionTrendList} from "@/api/dp/cockpit";

require("echarts/theme/macarons");

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    unit: {
      type: String,
      default: "万kwh",
    },
    dataName: {
      type: String,
      default: "容量",
    },
    timeRange: {
      type: String,
      default: "year",
    },
    fdlData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      chart: null,
      yearData: [120, 200, 150, 80, 70, 110],
      monthData: [90, 120, 150, 180, 210, 240],
      dayData: [50, 60, 70, 80, 90, 100, 110, 120, 130, 140]
    };
  },
  watch: {
    timeRange: {
      handler() {
        this.updateChart();
      },
      immediate: true
    },
    fdlData: {
      handler(newData) {
        if (newData && newData.length > 0) {
          this.updateChart();
        }
      },
      immediate: true
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.updateChart();
    },
    updateChart() {
      let that = this;
      let xAxisData = [];
      let seriesData = [];
      
      // 显示加载动画
      // this.chart.showLoading({
      //   text: '数据加载中...',
      //   color: '#36f5f7',
      //   textColor: '#fff',
      //   maskColor: 'rgba(0, 0, 0, 0.5)'
      // });
      
      electricityProductionTrendList("nian").then(response => {
        xAxisData = response.data["x轴"];
        seriesData = response.data["y轴"];
        
        // 隐藏加载动画
        this.chart.hideLoading();
        
        // 设置图表选项
        this.chart.setOption({
          // 全局动画配置
          animation: true,
          animationDuration: 1500,
          animationEasing: 'elasticOut',
          animationDelay: function(idx) {
            return idx * 100;
          },
          
          legend: {
            textStyle: {
              color: "#ffffff",
            },
            right: 0,
            itemHeight: 5,
            itemWidth: 20,
            backgroundColor: "#0AA7FF4D",
            // 图例动画
            animation: true,
            animationDurationUpdate: 800
          },
          tooltip: {
            trigger: 'axis',
            formatter: (params) => {
              const date = params[0].axisValue;
              const value = params[0].value;
              return `${value}<br/>${that.dataName}: ${date}`;
            },
            // 提示框动画
            animation: true,
            enterable: true
          },
          grid: {
            top: 30,
            left: 40,
            right: 0,
            bottom: 30,
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              rotate: that.timeRange === 'day' ? 45 : 0
            },
            // 坐标轴动画
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicInOut'
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#B0D7FF33",
              },
            },
            name: `单位：${that.unit}`,
            nameTextStyle: {
              color: "#999999",
            },
            // 添加格式化显示
            axisLabel: {
              formatter: function(value) {
                // 将数值除以10000并添加单位
                return value / 10000 ;
              }
            },
            // 坐标轴动画
            animation: true,
            animationDuration: 1000
          },
          series: [
            {
              name: `${that.dataName}`,
              data: [0,0,0,0,1760000],
              type: "line",
              smooth: false,
              // 悬停效果
              emphasis: {
                itemStyle: {
                  color: "#fff",
                  borderColor: '#36f5f7',
                  borderWidth: 3,
                  shadowColor: 'rgba(54, 245, 247, 0.5)',
                  shadowBlur: 10
                },
                lineStyle: {
                  width: 4
                }
              }
            },
          ],
          // 数据更新动画
          graphic: {
            elements: [{
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: '数据更新中...',
                fontSize: 20,
                fontWeight: 'bold',
                fill: '#fff'
              },
              invisible: true
            }]
          }
        });
        
        // 添加图表渲染完成后的动画
        this.chart.on('finished', () => {
          // 可以在这里添加额外的动画效果
        });
      });
    }
  },
};
</script>

<style scoped>
.chart {
  transition: all 0.5s ease;
}
</style>